<template>
  <div class="container max-w-4xl flex flex-col items-center py-4">
    <div>
      <span class="p-input-icon-left mr-2">
        <i class="pi pi-search" />
        <InputText type="text" v-model="searchText" placeholder="搜索设计师" />
      </span>
      <Button label="搜索" />
    </div>

    <div>
      <Message v-if="info?.role?.name === 'user'">
        <router-link
          class="div"
          to="/designer/register"
        >想要入驻？点此注册成为设计师！</router-link>
      </Message>
    </div>

    <div>
      <div v-for="item in designerList">2333</div>
    </div>
  </div>
</template>

<script lang="ts">
export default defineComponent({
  name: 'DesignerHome'
})
</script>

<script lang="ts" setup>
import { computed, defineComponent, ref } from 'vue'
import { useStore } from 'vuex'

import InputText from 'primevue/inputtext'
import Button from 'primevue/button'
import Message from 'primevue/message'

const store = useStore()
const searchText = ref('')
const designerList = ref<Designer[]>([])

const info = computed<LoginUser>(() => {
  return store.state.user
})
</script>